<template>
  <div class="user-detail-view">
    <el-dialog
      center
      append-to-body
      custom-class="user-detail-view-dialog"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="1060px"
      top="0"
    >
      <div id="printer" style="width:1000px;">
        <div style="textAlign:center;fontSize:20px;padding:20px;">应急管理部从业人员安全培训档案</div>
        <div v-if="userDetail">
          <div v-if="userDetail.userNumber && userDetail.userNumber.length > 0">
            <div style="textAlign:right;">员工编号：{{userDetail.userNumber}}</div>
          </div>
          <table class="table" v-if="userDetail.userInfo">
            <tr>
              <td>姓名</td>
              <td>{{userDetail.userInfo.realname}}</td>
              <td>性别</td>
              <td>{{userDetail.userInfo.gender === 1 ? '男' : '女'}}</td>
              <td>出生年月</td>
              <td>{{userDetail.userInfo.birthday}}</td>
              <td rowspan="4" style="padding: 0;width: 140px">
                <img :src="userDetail.userInfo.headUrl" width="140" />
              </td>
            </tr>
            <tr>
              <td>身份证号</td>
              <td colspan="2">{{userDetail.userInfo.identityCard}}</td>
              <td>手机号</td>
              <td colspan="2">{{userDetail.userInfo.mobile}}</td>
            </tr>
            <tr>
              <td>部门</td>
              <td>{{userDetail.userInfo.deptName}}</td>
              <td>职务/工种</td>
              <td>{{userDetail.userInfo.craftName}}</td>
              <td>政治面貌</td>
              <td>{{userDetail.userInfo.politicCountenance}}</td>
            </tr>
            <tr>
              <td>职称</td>
              <td colspan="2">{{userDetail.userInfo.professionalTitle}}</td>
              <td>文化程度</td>
              <td colspan="2">{{userDetail.userInfo.education}}</td>
            </tr>
            <tr>
              <td>家庭住址</td>
              <td colspan="6">{{userDetail.userInfo.nativePlace}}</td>
            </tr>
            <template v-if="userDetail.workExpList && userDetail.workExpList.length > 0">
              <tr>
                <td :rowspan="userDetail.workExpList.length + 1">工作经历</td>
                <td colspan="2">开始时间</td>
                <td colspan="2">截止时间</td>
                <td>单位</td>
                <td>部门</td>
              </tr>
              <tr v-for="item in userDetail.workExpList" :key="item.id">
                <td colspan="2">{{item.startTimeDate}}</td>
                <td colspan="2">{{item.endTimeDate}}</td>
                <td>{{item.place}}</td>
                <td>{{item.craft}}</td>
              </tr>
            </template>
          </table>

          <div v-if="userDetail.examScoreList && userDetail.examScoreList.length > 0">
            <div class="table-title">历次考试汇总</div>
            <table class="table">
              <tr>
                <td>时间</td>
                <td>考试名称</td>
                <td>组织/考核机构</td>
                <td>分数</td>
                <td>考试是否合格</td>
                <!-- <td>排名</td> -->
              </tr>
              <tr v-for="(item, index) in userDetail.examScoreList" :key="index">
                <td>{{item.examStartTime.substr(0, item.examStartTime.length - 3)}} 至 {{item.examEndTime.substr(0, item.examStartTime.length - 3)}}</td>
                <td>{{item.examName}}</td>
                <td>{{item.institutional}}</td>
                <td>{{item.score}}</td>
                <td>{{item.isPass ? '合格' : '不合格'}}</td>
                <!-- <td>{{item.ranking}}</td> -->
              </tr>
            </table>
          </div>

          <div
            v-if="userDetail.userCourseHistoryList && userDetail.userCourseHistoryList.length > 0"
          >
            <div class="table-title">历次学习记录</div>
            <table class="table">
              <tr>
                <td>课程名称</td>
                <td>学习状态</td>
                <td>考试状态</td>
                <td>课程总状态</td>
              </tr>
              <tr v-for="item in userDetail.userCourseHistoryList" :key="item.id">
                <td>{{item.title}}</td>
                <td>{{item.coursewareStatusStr}}</td>
                <td>{{item.examStatusStr}}</td>
                <td>{{item.statusStr}}</td>
              </tr>
            </table>
          </div>

          <div v-if="userDetail.breakRuleUserList && userDetail.breakRuleUserList.length > 0">
            <div class="table-title">安全生产违规违章行为记录</div>
            <table class="table">
              <tr>
                <td style="width:120px">时间</td>
                <td>原因</td>
                <td>结果</td>
                <td style="width:120px">三违类型</td>
              </tr>
              <tr v-for="(item, index) in userDetail.breakRuleUserList" :key="index">
                <td>{{item.breakRuleTime}}</td>
                <td>{{item.reason}}</td>
                <td>{{item.punishResult}}</td>
                <td>{{item.punishLevel}}</td>
              </tr>
            </table>
          </div>

          <div v-if="userDetail.certList && userDetail.certList.length > 0">
            <div class="table-title">证件汇总</div>
            <table class="table">
              <tr>
                <td>证件类型</td>
                <td>证件名称</td>
                <td>专业</td>
                <td>级别</td>
                <td>技术等级</td>
                <td>工种</td>
                <td>证件编号</td>
                <td>发证日期/毕业时间</td>
                <td>开始日期</td>
                <td>截止日期</td>
                <td>复审日期</td>
                <td>发证机构</td>
                <td>操作项目</td>
                <td>证件扫描</td>
              </tr>
              <tr v-for="item in userDetail.certList" :key="item.id">
                <td>{{item.certType}}</td>
                <td>{{item.certName}}</td>
                <td>{{item.specialty}}</td>
                <td>{{item.level}}</td>
                <td>{{item.skillLevel}}</td>
                <td>{{item.craft}}</td>
                <td>{{item.certNumber}}</td>
                <td>{{item.certOpenDate}}</td>
                <td>{{item.certStartTime}}</td>
                <td>{{item.certEndTime}}</td>
                <td>{{item.certSecondTime}}</td>
                <td>{{item.certAuthority}}</td>
                <td>{{item.remark}}</td>
                <td>附</td>
              </tr>
            </table>
          </div>

          <div v-if="userDetail.certList && userDetail.certList.length > 0">
            <div v-for="(item, index) in userDetail.certList" :key="index">
              <div>附：{{index + 1}}</div>
              <img
                v-if="item.photoZ && item.photoZ.length > 0"
                :src="item.photoZ"
                width="120"
                height="120"
              />
              <img
                v-if="item.photoF && item.photoF.length > 0"
                :src="item.photoF"
                width="120"
                height="120"
              />
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" style="textAlign:right;">
        <!-- <el-button icon="el-icon-printer" type="primary" v-print="'#printer'">打印</el-button> -->
        <div v-print="printObj">
          <el-button type="primary">打印</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'printer',
        popTitle: '',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      },
      visible: false,
      userDetail: null
    }
  },
  methods: {
    print() {
      this.$refs.printer.print()
    },
    async open(userId) {
      await this.loadUserDetail(userId)
      this.visible = true
    },
    close() {
      this.visible = false
    },
    async loadUserDetail(userId) {
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.7)'
      })
      let res = await this.$http.post(
        '/usercenter-admin/user/getoneuseronefile',
        { userId: userId }
      )
      this.userDetail = res.data
      loading.close()
    }
  }
}
</script>

<style scoped lang="less">
.table-title {
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 5px;
}

.table {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  width: 100%;
}
.table td {
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  text-align: center;
  padding: 8px 5px;
}
</style>